<template>
  <div class="main-container">
      <el-button @click="handleBatchDelete">批量删除</el-button>
        <el-table
          :data="activityData"
          border
          :header-cell-style="headerCellStyle"
          @selection-change="handleSelectionChange"
        >
          <!-- 添加多选框列 -->
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- 定义列 -->
          <el-table-column
            v-for="item in activityDataLabel"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
            :width="item.width ? item.width : 80"
            :sortable="item.sortable ? item.sortable : false"
          >
          <template #default="{ row }" v-if="item.prop === 'avatar'">
              <div style="display: flex; justify-content: center; align-items: center;">
                <img :src="row.avatar" alt="发布者头像" style="width: 50px; height: 30px; object-fit: cover;">
              </div>
            </template>
          <template #default="{ row }" v-else-if="item.prop === 'imageUrl'">
              <div style="display: flex; justify-content: center; align-items: center;">
                <img :src="row.imageUrl" alt="活动图" style="width: 80px; height: 30px; object-fit: cover;">
              </div>
            </template>
            <template #default="{ row }" v-else>
              <div style="text-align: center;">
                {{ row[item.prop] }}
              </div>
            </template>
          </el-table-column>
          <!-- 操作列 -->
          <el-table-column label="操作">
            <template #default="{ row }">
              <div class="action-column">
                <el-button @click="handleDelete(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
       <!-- 分页组件 -->
       <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="pagination.pageNo"
          :current-page="pagination.pageNo"
          :page-size="pagination.pageSize"
          layout="total,prev, pager, next"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
<script setup>
  import { ref,onMounted } from 'vue';
  import { getActivityListAPI } from '../../../../api/admin/content'
  import { delActivityAPI,delActivitySAPI } from '../../../../api/admin.js'
  import dayjs from 'dayjs'; // 引入 day.js
 // 定义表头样式方法
 const headerCellStyle = () => {
    return {
      'text-align': 'center',
      color: 'black',
      'background-color': '#f5f7f9'
    };
  };
  // 声明 selectedRows 变量
  const selectedRows = ref([]);
  // 表格列配置
  const activityDataLabel = ref([
    {
      prop: 'activityId',
      label: '活动id',
      width: 100,
      sortable: true
    },
    {
      prop: 'title',
      label: '活动名',
      width: 150,
    },
    {
      prop: 'avatar',
      label: '发布者头像',
      width: 100,
    },
    {
      prop: 'imageUrl',
      label: '活动图',
      width: 150,
    },
    {
      prop: 'name',
      label: '作者名',
    },
    {
      prop: 'like',
      label: '喜欢',
    },
    {
      prop: 'isShow',
      label: '报名状态',
    },
    {
        prop:'activityNum',
        label:"名额"
    },
    {
        prop:'joinNum',
        label:"已报名人数"
    },
    {
      prop: 'activityPlace',
      label: '活动地点',
      width: 150,
    },
    {
      prop: 'createTime',
      label: '创建时间',
      width: 150,
      sortable: true,
    },
    {
      prop: 'startTime',
      label: '开始时间',
      width: 150,
      sortable: true,
    },
    {
      prop: 'endTime',
      label: '结束时间',
      width: 150,
      sortable: true,
    },
  ]);
  // 表格数据
  const activityData = ref([]);
  // 分页相关数据封装
const pagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

  //删除按钮点击事件
  const handleDelete = async (row) => {
      const response = await delActivityAPI({activityId:row.activityId});
      // console.log(response.data);
      await fetchActivityList();
  };

  // 多选框选中状态改变时触发
  const handleSelectionChange = (rows) => {
    selectedRows.value = rows;
  };
 // 批量删除按钮点击事件
 const handleBatchDelete = async () => {
    if (selectedRows.value.length === 0) {
      console.log('请选择要删除的活动');
      return;
    }
    const ids = selectedRows.value.map(row => row.activityId.toString()).join(',');
    // console.log(ids);
    try {
      const response = await delActivitySAPI({ids});
      // console.log(response.data);
      if (response.data.code === 0) {
        // 从表格数据中移除已删除的行
        //activityData.value = activityData.value.filter(item =>!ids.includes(item.activityId));
        console.log('批量删除成功');
      } else {
        console.error('批量删除失败:', response.message);
      }
    } 
    catch (error) {
      console.error('批量删除失败:', error);
    }
    await fetchActivityList();
  };
// 每页显示数量改变时触发
  const handleSizeChange = async (newSize) => {
    pagination.value.pageSize = newSize;
    pagination.value.pageNo = 1;
    await fetchActivityList();
 };

// 当前页码改变时触发
const handleCurrentChange = async (newPage) => {
    pagination.value.pageNo = newPage;
    await fetchActivityList();
  };
// 获取活动列表
const fetchActivityList = async () => {
  try {
    let param = {
       // 获取当前页码
      pageNo: pagination.value.pageNo,
      // 获取每页显示数量
      pageSize: pagination.value.pageSize
    };
     // 调用后端接口，传递分页参数
    const response = await getActivityListAPI(param);
    // console.log(response.data);
    // 格式化时间字段
    const formattedData = response.data.data.list.map(item => {
        return {
          ...item,
          createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm'),
          startTime: dayjs(item.startTime).format('YYYY-MM-DD HH:mm'),
          endTime: dayjs(item.endTime).format('YYYY-MM-DD HH:mm')
        };
      });
      // 将后端返回的活动列表数据赋值给 activityData
      activityData.value = formattedData;
    // 将后端返回的总数据条数赋值给 total
    pagination.value.total = response.data.data.total;
   } catch (error) {
    console.error('获取活动列表失败:', error);
  }
};
 // 组件挂载时获取数据
 onMounted(async () => {
    await fetchActivityList();
});
</script>
  
<style lang="less" scoped>
.main-container{
  height: calc(100% - 64px);
  // height: 100%;
  // background-color: aqua;
}
.el-table {
    // overflow-y: scroll;
    height: 100%;
    // background-color: red;
    .action-column {
      display: flex;
      flex-wrap: nowrap;
      /* 确保按钮不换行 */
      white-space: nowrap;
      /* 防止按钮内的文本换行 */
    }
}
.pagination-container {
  display: flex;
  // background-color: rgb(55, 224, 21);
  justify-content: center;
  // margin-top: 20px;
}
</style>